<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2022/5/18
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <meta
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
            name="viewport">

    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<%--    <link rel="stylesheet"--%>
<%--          href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">--%>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">
    <style>
        .qws{
            position: absolute;
            top: 250px;
            height: 350px;
            width: 450px;
            left:35%;
            opacity: 0.85;
            background-color: #FFFFFF;
            !important;
        }
        .form-group{
            top: 20px;
            width: 300px;
            left: 80px;
        }
        .login-logo{
            position: absolute;
            top: 20px;
            left: 10%;
        }
        .op{
            position: absolute;
            top: 90px;
           left: 40%;

        }
        .bn{
            position: absolute;
            top: 120px;
        }
        .row{
            position: absolute;
            left: 20px;
            width: 450px;
            right: 0;
            top: 160px;
        }
       .ll{
           width: 80px;
           height: 40px;
       }
        .mm{
            position: absolute;
            top: 250px;
        }
    </style>
</head>
<body class="hold-transition login-page">
<div class="container"><img class="background" src="${pageContext.request.contextPath}/img/skry.jpg"/>

    <p class="message">如果你有勇气去追求<br>你所有的梦想都能实现</p>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
</div>
<div class="login-box qws">
    <div class="login-logo">
       <h1>欢迎来到借书用户系统</h1>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <h4 class="login-box-msg op">学生登录端</h4>

        <form action="${pageContext.request.contextPath}/user/login"
              method="post" class="bn">
            <div>${msg}</div>
            <div class="form-group has-feedback">
                <input type="text" name="username" autocomplete="off" class="form-control"
                       placeholder="用户名">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control"
                       placeholder="密码"> <span
                    class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <button class="ll" type="button" onclick="location.href='${pageContext.request.contextPath}/user/inadd'">
                         注册
                    </button>
                    &nbsp; &nbsp;
                    <a title="管理员登录" href="${pageContext.request.contextPath}/jsp/adim-login.jsp">
                        <svg t="1653899634283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1332" width="32" height="32"><path d="M648.429196 295.325484a259.809635 259.809635 0 0 0-272.608138 0 31.99626 31.99626 0 0 1-39.675363-4.479477l-137.58392-137.58392a31.99626 31.99626 0 0 1 3.199626-47.99439 509.700429 509.700429 0 0 1 620.727452 0 31.99626 31.99626 0 0 1 3.199626 47.99439l-137.58392 137.58392a31.99626 31.99626 0 0 1-39.675363 4.479477z m11.518654-67.192147l93.429081-93.429081a447.947646 447.947646 0 0 0-482.503608 0l93.429081 93.429081a319.962604 319.962604 0 0 1 295.645446 0zM105.452657 822.303893a509.380466 509.380466 0 0 1-62.392708-105.587659 31.99626 31.99626 0 0 1 16.318093-42.235064 31.99626 31.99626 0 0 1 42.235064 16.638055 429.389815 429.389815 0 0 0 31.99626 62.072746l93.42908-93.429081a319.962604 319.962604 0 0 1 0-295.645446L134.889216 270.688363a446.02787 446.02787 0 0 0-66.872184 301.084811A31.99626 31.99626 0 0 1 40.820211 607.928948a31.99626 31.99626 0 0 1-36.155775-27.516784A508.740541 508.740541 0 0 1 105.452657 201.576441a31.99626 31.99626 0 0 1 47.99439-3.199626l137.58392 137.58392a31.99626 31.99626 0 0 1 4.479477 39.675363 255.970083 255.970083 0 0 0 0 272.608138 31.99626 31.99626 0 0 1-4.479477 39.675363l-137.58392 137.58392a31.99626 31.99626 0 0 1-47.99439-3.199626zM201.761401 918.612637a31.99626 31.99626 0 0 1-3.199626-47.994391l137.58392-137.583919a31.99626 31.99626 0 0 1 39.675363-4.479477 259.809635 259.809635 0 0 0 272.608138 0 31.99626 31.99626 0 0 1 39.675363 4.479477l137.58392 137.583919a31.99626 31.99626 0 0 1-3.199626 47.994391 509.700429 509.700429 0 0 1-620.727452 0z m69.111922-29.436559a447.947646 447.947646 0 0 0 482.503608 0l-93.429081-93.429081a325.401969 325.401969 0 0 1-295.645446 0zM870.803206 825.503519l-137.583919-137.58392a31.99626 31.99626 0 0 1-4.479477-39.675363 255.970083 255.970083 0 0 0 0-272.608138 31.99626 31.99626 0 0 1 4.479477-39.675363l137.583919-137.58392a31.99626 31.99626 0 0 1 47.994391 3.199626 509.700429 509.700429 0 0 1 0 620.727452 31.99626 31.99626 0 0 1-47.994391 3.199626z m-74.871249-165.740629l93.429081 93.429081a447.947646 447.947646 0 0 0 0-482.503608l-93.429081 93.429081a319.962604 319.962604 0 0 1 0 295.645446z" fill="#38004D" p-id="1333"></path><path d="M512.125127 703.91773a191.977563 191.977563 0 1 1 191.977563-191.977563 191.977563 191.977563 0 0 1-191.977563 191.977563z m0-319.962605a127.985042 127.985042 0 1 0 127.985042 127.985042 127.985042 127.985042 0 0 0-127.985042-127.985042z" fill="#9F85EC" p-id="1334"></path><path d="M802.971134 925.331852a31.99626 31.99626 0 0 1-22.717345-9.278916l-137.583919-137.58392a31.99626 31.99626 0 1 1 45.434689-45.434689l137.58392 137.583919a31.99626 31.99626 0 0 1-22.717345 54.713606z" fill="#38004D" p-id="1335"></path></svg>                    </a>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>
        <a title="返回首页" href="${pageContext.request.contextPath}/index.jsp">
            <svg t="1653998547414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1002" width="32" height="32"><path d="M633.972 524H390c-16.569 0-30 13.431-30 30v342c0 16.569 13.431 30 30 30h243.972c16.569 0 30-13.431 30-30V554c0-16.569-13.431-30-30-30z m-30 60v282H419.999V584h183.973z" fill="#48EBE9" p-id="1003"></path><path d="M450.032 133.943l-274 186.824A110 110 0 0 0 128 411.65V816c0 60.751 49.249 110 110 110h548c60.751 0 110-49.249 110-110V411.65a110 110 0 0 0-48.032-90.883l-274-186.824c-37.38-25.488-86.555-25.488-123.936 0z m90.135 49.573l274 186.824A50 50 0 0 1 836 411.65V816c0 27.614-22.386 50-50 50H238c-27.614 0-50-22.386-50-50V411.65a50 50 0 0 1 21.833-41.31l274-186.824c16.99-11.586 39.343-11.586 56.334 0z" fill="#4633FF" p-id="1004"></path></svg>
        </a>
        <a class="mm" href="${pageContext.request.contextPath}/user/wm">忘记密码</a><br>


    </div>
    <!-- /.login-box-body -->
    <script
            src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script
            src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script
            src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(function() {
            $('input').iCheck({
                checkboxClass : 'icheckbox_square-blue',
                radioClass : 'iradio_square-blue',
                increaseArea : '20%' // optional
            });
        });
    </script>
</div>
</body>
</html>
